import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Button, message, Card } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import styled from '../task_check.less';
import Imgviewer from '@/components/ImgViewer';

const isError = {
  '0': '错误',
  '1': '正确'
};

interface Props extends FormComponentProps {
  dispatch?: Function,
  data?: {
    id: number
  },
  details?: any,
  match: {
    params: {
      id: number
    }
  }
}

@connect(({ task_check }) => ({
  details: task_check.details
}))
class FormItem extends Component<Props, any> {
  state = {
    detData: {
      name: '',
      templateId: '',
      taskTypeName: '',
      targetTypeName: '',
      targetStatusName: '',
      createTime: '',
      questionGroup: []
    }
  };

  componentWillMount() {
    let hasMsg = message.loading('');
    const { dispatch, match } = this.props;
    const { params } = match;
    this.setState({
      taskId: params.id
    });
    dispatch({
      type: 'task_check/queryInfoById',
      payload: params.id
    }).then(() => {
      const { details } = this.props;
      if (details) {
        this.setState({
          detData: details
        }, hasMsg)
      }
    })
  }

  getAns(ans:Array<string>, qus: Array<any>) {
    const res = Array.isArray(ans) &&  Array.isArray(qus)? ans.map(it => qus.find(v => v.id === it)).map(w => w.context) : ''

    return res && Array.isArray(res) ? res.join('、') : ''
  }

  optionFn(data) {
    if (!data) {
      return null;
    } else if (!Array.isArray(data.questionItemList) && data.answer) {
      return (
        <div>
          <div>
            <p>回答：</p>
            <p>{data.answer || ''}</p>
          </div>
          <p>图片：</p>
          {
            Array.isArray(data.attachList) && data.attachList.map((it, index) => (
              <Imgviewer key={index} hasText="查看图片" missText="暂无图片" url={it} isThumb/>
            ))
          }
        </div>
      );
    } else {
      return (
        <div>
          {
            Array.isArray(data.questionItemList) && data.questionItemList.map((item, index) => (
              <p key={index}>{index + 1}、{item.context}</p>
            ))
          }
          <div>
            <p className={data.type === '1' ? 'none' : ''}>正确答案: {this.getAns(data.defaultItem, data.questionItemList)}</p>
            <p>{data.type === '1' ? `回答：${data.answer || ''}` : `已选：${ this.getAns(data.item, data.questionItemList) }`}</p>
            <p className={data.type === '1' ? 'none' : ''}>{`是否回答正确：${data.isRight ? isError[data.isRight] : '-'}`}</p>
          </div>
          <p>图片：</p>
          {
            Array.isArray(data.attachList) && data.attachList.map((it, index) => (
              <Imgviewer key={index} hasText="查看图片" missText="暂无图片" url={it} isThumb />
            ))
          }
        </div>
      )
    }
  }

  render() {
    return (
      <div>
        <div style={{ 'paddingTop': '20px' }}>
          <div className={styled.task_check_ul}>
            <h5 style={{ 'fontSize': '16px' }}>基本信息</h5>
            <ul className="task-ul">
              <li className="task-li">
                <p>报表名称：{this.state.detData.name}</p>
                <p>报表模版编号：{this.state.detData.templateId}</p>
                <p>任务类型：{this.state.detData.taskTypeName}</p>
              </li>
              <li className="task-li">
                <p>目标类型：{this.state.detData.targetTypeName}</p>
                <p>目标状态：{this.state.detData.targetStatusName}</p>
                <p>创建时间：{this.state.detData.createTime ? this.state.detData.createTime.slice(0, 10) : ''}</p>
              </li>
            </ul>
          </div>
          <div>
            <h5 style={{ 'fontSize': '16px', 'marginBottom': '20px' }}>问题组</h5>
            <div>
              {
                this.state.detData && Array.isArray(this.state.detData.questionGroup) ? this.state.detData.questionGroup.map((item, index) => (
                  <Card
                    title={item.name}
                    style={{ width: '90%', 'margin': '0 auto' }}
                    key={index}
                  >
                    {
                      Array.isArray(item.questionList) && item.questionList.map((q_item, q_index) => (
                        <div key={q_index}>
                          <h5 style={{
                            'marginBottom': '10px',
                            'borderBottom': '1px solid #aaa',
                            'fontSize': '16px',
                            'paddingLeft': '24px',
                            'paddingBottom': '6px'
                          }}>{q_item.name ? `${q_item.name}(${q_item.typeName})` : ''}</h5>
                          <div style={{ 'paddingLeft': '48px', 'fontSize': '15px' }}>
                            {
                              this.optionFn(q_item)
                            }
                          </div>
                        </div>
                      ))
                    }
                  </Card>
                )) : null
              }
            </div>
          </div>
        </div>
        <div className="foo" style={{ 'marginTop': '30px', 'paddingLeft': '50px' }}>
          <Button onClick={() => {
            window.history.go(-1);
          }}>返回</Button>
        </div>
      </div>
    );
  }
}

const FormList = Form.create()(FormItem);
export default FormList;
